<template>
	<view class="container">
		<view class="header">
			<!--自定义头部状态栏-->
			<!-- #ifdef APP-PLUS -->
			<view class="status_bar">
				<view class="top_view"></view>
			</view>
			<!-- #endif -->
		</view>
		<view class="middle">
			 <view class="gaikuang">
				<text class="neirong">分享</text>
				    </view>
			<view @click="toTiaoz(item)" class="dibu u-m-t-80" v-for="(item,index) in list" :key="index">
				<image :src="item.icon" class="picture" mode=""></image>
				<view class="title">
					{{item.name}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						icon: '../../../static/img/rrw.png',
						name: "人人网",
						url: this.$mRoutesConfig.login
					}, {
						id: 2,
						icon: '../../../static/img/tysq.png',
						name: "天涯",
						url: this.$mRoutesConfig.joinPartner
					}, {
						id: 3,
						icon: '../../../static/img/weibo.png',
						name: "微博",
						url: this.$mRoutesConfig.login
					},
					{
						id: 4,
						icon: '../../../static/img/weixin.png',
						name: "微信",
						url: this.$mRoutesConfig.login
					}


				],
			}
		},
		methods: {
			toTiaoz(item) {
				// debugger;
				if (item.id == 2) {
					this.$mRouter.push({
						route: this.$mRoutesConfig.joinPartner
					});
				}
			},
			toBack() {
				uni.switchTab({
					url: '../tabBar/index'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.middle {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: absolute;
		width: 100%;
		bottom: 0rpx;
		height: 278rpx;
	}

	.dibu {
		width: 25%;
		text-align: center;
	}

	.picture {
		width: 86rpx;
		height: 86rpx;
	}

	.title {
		font-size: 26rpx;
		color: #888D99;
		text-align: center;
	}

	.neirong {
		text-align: center;
		position: absolute;
		left: 45%;
		font-size: 36rpx;
		color: #0D1D36;
		font-weight: 500;
		padding-top: 5rpx;
	}

	.gaikuang:before {
		content: '';
		position: absolute;
		top: 10%;
		left: 10rpx;
		background: #dad6d6;
		width: 44%;
		height: 1px;
	}

	.gaikuang:after {
		content: '';
		position: absolute;
		top: 10%;
		right: 10rpx;
		background: #dad6d6;
		width: 44%;
		height: 1px;
	}
</style>
